<!--
 * @Author: anshengtyp
 * @Date: 2023-12-13 10:54:22
 * @LastEditTime: 2023-12-14 14:58:36
 * @LastEditors: anshengtyp
 * @Descriptio： 任务总体进度
-->
<template>
  <div class="population">
    <div class="query">
      选择项目：<el-select filterable v-model="projectId" placeholder="请选择" size="mini" style="width: 300px;">
        <el-option v-for="item in projectOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div id="taskPopulation"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons')
import resize from '../dashboard/mixins/resize'
import { getAllProjectsList, getCompletedTasksRates } from "@/api/indexCount.js";
export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      projectId: '',
      projectOptions: [],
      monthData: [],
      seriesData: []
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.getAllProjectsList();
    let year = new Date().getFullYear();
    for (let i = 1; i <= 12; i++) {
      if (i < 10) {
        this.monthData.push(year + '0' + i)
      } else {
        this.monthData.push(year + '' + i)
      }
    }
  },
  watch: {
    projectId: {
      async handler() {
        this.seriesData = [];
        if (!this.projectId) return;
        await this.getData();
        this.initChart();
      },
    }
  },

  methods: {
    async getAllProjectsList() {
      const res = await getAllProjectsList(new Date().getFullYear());
      for (const key in res.data) {
        if (Object.hasOwn(res.data, key)) {
          this.projectOptions.push({
            label: res.data[key],
            value: key
          })
        }
      }
      this.projectId = this.projectOptions[0]?.value; // 默认选中第一个
    },
    async getData() {
      const res1 = await getCompletedTasksRates(new Date().getFullYear(), this.projectId);
      for (const key in res1.data) {
        if (Object.hasOwn(res1.data, key)) {
          const element = res1.data[key];
          const result = new Array(12).fill('-');

          element.rates?.forEach(item => {
            const index = +item.writeTime.split('-')[1];
            result[index - 1] = Number(item.overallCompletionRate);
          });
          this.seriesData.push({
            name: element.name,
            smooth: true, // 平滑曲线
            type: 'line',
            // showSymbol: false,
            data: result
          })
        }
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('taskPopulation'));
      this.chart.setOption({
        title: {
          text: '任务总体进展情况'
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            let year = params[0].name.slice(0, 4)
            let month = params[0].name.slice(4)
            let str = `<span>${year}年${month}月</span><br/>`
            params.forEach(element => {
              str += `
              <span style="color: ${element.color}">●</span>
              <span>${element.seriesName} : ${element.value === '-' ? '-' : element.value + '%'}</span><br/>
              `
            });
            return str
          }
        },
        legend: {
          top: '8%',
          left: 'left',
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 2,
        },
        grid: {
          top: '20%',
          left: '0%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.monthData,
          axisLabel: {
            interval: 0,
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          },
          min: 0, // 设置最小值
          max: 100, // 设置最大值
        },
        series: this.seriesData
      }, true)
    },
  },
};
</script>

<style lang="scss" scoped>
.population {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .query {
    width: 100%;
    height: 40px;
  }

  #taskPopulation {
    width: 100%;
    height: 90%;
  }

}
</style>
